<template>
  <div>
    <div class="wallet-bind">
      <mt-field label="原支付宝帐号：" :value="oldInfo.alipay" class="disabled" disabled></mt-field>
      <mt-field label="姓名：" :value="oldInfo.name" class="disabled" disabled></mt-field>
      <mt-field label="新支付宝帐号：" placeholder="点击输入" v-model="alipay"></mt-field>
      <mt-field label="" placeholder="输入验证码" v-model="code" class="verify-code">
        <mt-button type="default" :class="{disabled: codeBtnDis}" :disabled="codeBtnDis" @click.native="sendSms">{{sendBtnText}}</mt-button>
      </mt-field>
      <mt-button type="default" :disabled="isDisabled" @click.native="changeAlipay">确 定</mt-button>
      <mobile-bind ref="mobileBind" @sendSms="sendSms"></mobile-bind>
    </div>
  </div>
</template>

<script>
  import {Toast} from 'Mint-ui'
  import MobileBind from '@/components/MobileBind'
  
  export default {
    name: 'WalletReset',
    components: {
      MobileBind
    },
    data () {
      return {
        oldInfo: {},
        alipay: '',
        code: '',
        codeBtnDis: false,
        sendBtnText: '发送验证码'
      }
    },
    computed: {
      isDisabled () {
        return this.alipay === '' || this.code === ''
      }
    },
    methods: {
      changeAlipay () {
        let params = {
          alipay: this.alipay,
          code: this.code
        }
        this.$post('/vue/my/apply_modify_alipay', params).then(data => {
          msg(data, () => {
            this.$router.go(-1)
          })
        })
      },
      getOldAlipay () {
        this.$post('/vue/my/get_old_alipay', '').then(data => {
          this.oldInfo = data
        })
      },
      sendSms () {
        this.$post('/vue/goods/check_user_phone', '').then(data => {
          if (data === 'need_phone') {
            this.$refs.mobileBind.popShow = true
          } else {
            this.sendBtn()
            this.$post('/vue/sendsms/alipay_validate_code', '').then(data => {
              if (data.Code === 'OK') {
                msg('发送验证码成功！')
              }
            })
          }
        })
      },
      sendBtn () {
        this.codeBtnDis = true
        let time = 60
        let timer = setInterval(() => {
          this.sendBtnText = `已发送(${--time})`
          if (time < 0) {
            clearInterval(timer)
            this.codeBtnDis = false
            this.sendBtnText = '重新发送'
          }
        }, 1000)
      }
    },
    mounted () {
      this.getOldAlipay()
    }
  }
  const msg = (msg, callback) => {
    Toast({
      message: msg,
      position: 'bottom',
      duration: 2000
    })
    setTimeout(() => {
      callback()
    }, 2000)
  }
</script>

<style lang="less">
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);
  @c-226: rgb(226, 226, 226);
  @c-235: rgb(235, 235, 235);
  @c-red: rgb(255, 129, 98);
  @c-blue: rgb(108, 184, 222);
  @c-yellow: rgb(245, 166, 35);

  .wallet-bind {
    background-color: rgb(240, 244, 247);
    min-height: 100vh;
    overflow: hidden;
    .hint {
      padding: 12px;
      font-size: 12px;
      text-align: left;
      .yellow {
        line-height: 24px;
        color: @c-yellow;
      }
      p {
        line-height: 20px;
        color: @c-169;
      }
    }
    .mint-cell {
      min-height: 48px;
      margin: 0 12px 16px;
      color: @c-124;
      border-radius: 24px;
      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
      &.disabled {
        background-color: @c-226;
        box-shadow: none;
        .mint-cell-value {
          .mint-field-core {
            background-color: @c-226;
          }
        }
      }
      &:first-child {
          margin-top: 16px;
      }
      .mint-cell-wrapper {
        font-size: 12px;
        padding: 0 16px;
        text-align: left;
        background-size: 100% 1px;
        .mint-cell-title {
          .mint-cell-text {
            line-height: 24px;
          }
        }
        .mint-cell-value {
          .mint-field-core {
            text-align: right;
            color: @c-blue;
            &::-webkit-input-placeholder {
              color: @c-169;
            }
          }
          .mint-field-other {
            img {
              width: 24px;
              height: 24px;;
            }
          }
        }
      }
      &.verify-code {
        .mint-cell-value {
          .mint-field-core {
            text-align: left;
          }
        }
      }
      .mint-button {
        width: 104px;
        height: 32px;
        margin: 0 -8px 0 0;
        padding: 0;
        background-color: #FFF;
        color: @c-blue;
        border: 2px solid @c-blue;
        &.is-disabled {
          opacity: 1;
          background-color: #FFF;
          color: @c-226;
          border-color: @c-226;
        }
      }
    }
    .mint-button {
      margin: 8px 32px;
      width: 168px;
      height: 40px;
      border-radius: 20px;
      background-color: @c-blue;
      color: #FFF;
      font-size: 13px;
      line-height: 24px;
      border: 0;
      &.is-disabled {
        opacity: 1;
        background-color: @c-226;
      }
      &::after {
        border-radius: 20px;
      }
    }
  }
  .pop-in-toast {
    z-index: 2500;
  }
  .mint-indicator-wrapper {
    z-index: 2500;
  }
</style>